<template>
	<view>
		<view class="" style="height: 20rpx;"></view>
		<view class="flexc_2" v-if="orderinfo.printStatus == 2">
			<uni-icons type="clear" size="16" color="#FF4800"></uni-icons>
			<view class="ts">
				失败原因：XXX连续中断！
			</view>
		</view>
		<view class="title">
			<view class="tit_l">
				<image :src="orderinfo.productImage" mode=""></image>
			</view>
			<view class="tit_r">
				<view class="" style="display: flex;justify-content: space-between;">
					<view class="tit">{{orderinfo.productName}}</view>
					<view class="ttype" v-if="orderinfo.printStatus == 0">未打印</view>
					<view class="ttype" v-if="orderinfo.printStatus == 1">打印成功</view>
					<view class="ttype1" v-if="orderinfo.printStatus == 2">打印失败</view>
				</view>
				<view class="price"><span>￥</span>{{orderinfo.productPrice}}</view>
			</view>
		</view>
		<view class="content">
			<view class="items_flex">
				<view class="text">下单数量</view>
				<view class="text">{{orderinfo.productCount}}</view>
			</view>
			<view class="items_flex">
				<view class="text">下单金额</view>
				<view class="text">¥{{orderinfo.totalAmount}}</view>
			</view>
			<view class="items_flex">
				<view class="text">下单车牌号</view>
				<view class="text">{{orderinfo.carNumber}}</view>
			</view>
		</view>
		<view class="content">
			<view class="items_flex">
				<view class="text">订单编号</view>
				<view class="text">{{orderinfo.orderNumber}}</view>
			</view>
			<view class="items_flex">
				<view class="text">创建时间</view>
				<view class="text">{{orderinfo.createTime}}</view>
			</view>
			<view class="items_flex">
				<view class="text">付款时间</view>
				<view class="text">{{orderinfo.payTime}}</view>
			</view>
			<view class="items_flex">
				<view class="text">打印时间</view>
				<view class="text">{{orderinfo.printTime}}</view>
			</view>
		</view>
		<view class="btn" v-if="orderinfo.printStatus == 0 || orderinfo.printStatus == 2">
			<view class=""></view>
			<view class="text" @click="dy(item)">
				立即打印
			</view>
		</view>
	</view>
</template>

<script>
	import {
		orderListinfo,dyorder
	} from '../../common/http.api.js'
	export default {
		data() {
			return {
				orderinfo:{},
				id:''
			};
		},
		onLoad(e) {
			this.id = e.id
			orderListinfo({id:e.id}).then(res=>{
				if(res.code == 200){
					this.orderinfo = res.data
				}
			})
			
		},
		methods:{
			dy(){
				dyorder({id:this.id}).then(res=>{
					if(res.code == 200){
						orderListinfo({id:this.id}).then(res=>{
							if(res.code == 200){
								this.orderinfo = res.data
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #F6F6F6;
	}
	.title {
		width: 702rpx;
		height: 164rpx;
		margin: 0rpx auto;
		display: flex;
		background-color: #fff;
		padding: 24rpx 20rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
	
		.tit_l {
			width: 116rpx;
			height: 116rpx;
	
			image {
				width: 100%;
				height: 116rpx;
				border-radius: 10rpx;
			}
		}
	
		.tit_r {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 20rpx;
			flex: 1;
	
			.tit {
				font-weight: bold;
				font-size: 28rpx;
				color: #282828;
			}
	        .ttype{
				font-weight: 400;
				font-size: 24rpx;
				color: #797979;
			}
			.ttype1{
				font-weight: 400;
				font-size: 24rpx;
				color: #FF4800;
			}
			.price {
				font-weight: bold;
				font-size: 28rpx;
				color: #282828;
	
				span {
					font-size: 20rpx;
				}
			}
	
		}
	}
	.content{
		width: 702rpx;
		margin: 20rpx auto;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 0rpx 20rpx;
		box-sizing: border-box;
		.items_flex{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx 0rpx;
			box-sizing: border-box;
			border-bottom: 1px solid #EEEEEE;
			.text{
				font-weight: 400;
				font-size: 28rpx;
				color: #282828;
			}
		}
		.items_flex:last-child{
			border: none;
		}
	}
	.btn{
		background: #fff;
		position: fixed;
		width: 100%;
		bottom: 0%;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		.text{
			width: 144rpx;
			height: 56rpx;
			background: linear-gradient(#5070E9 0%, #598DFD 100%);
			text-align: center;
			line-height: 56rpx;
			color: #fff;
			border-radius: 28rpx;
			font-size: 24rpx;
			margin: 20rpx;
		}
	}
	.flexc_2{
		width: 702rpx;
		display: flex;
		background: rgba(255,72,0,0.1);
		margin: 0rpx auto 20rpx;
		align-items: center;
		padding: 24rpx 20rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		.ts{
			font-weight: 400;
			font-size: 24rpx;
			color: #FF4800;
			margin-left: 6rpx;
		}
	}
</style>
